<script setup>
//import {RouterView } from 'vue-router'
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 拓展组件 相机控件

// 创建场景
const scene = new THREE.Scene()

// 创建相机
const camera = new THREE.PerspectiveCamera(
  45, // 视角
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近平面
  1000 // 远平面
)

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight) // 尺寸设置为整个屏幕
document.body.appendChild(renderer.domElement) // 将渲染器渲染到body上

// 创建立方体
const geometry = new THREE.BoxGeometry(1,1,1)
// 创建材质
const material = new THREE.MeshBasicMaterial({color: 0x00ff00})
const parenMaterial = new THREE.MeshBasicMaterial({color: 0xff0000})
// 创建网格
let parentCube = new THREE.Mesh(geometry,parenMaterial) // 创建一个父元素
const cube = new THREE.Mesh(geometry,material)
cube.position.set(2,0,0) // 移动网格位置

parentCube.add(cube) // 将子元素放到父元素上
parentCube.position.set(-2,0,0)

// 将物体添加到场景中
scene.add(parentCube)
//scene.add(cube)

// 设置相机位置
camera.position.z = 5 // z轴 蓝色
camera.position.y = 2 // y轴 绿色
camera.position.x = 2 // x轴 红色
camera.lookAt(0,0,0) // 看向原点

// 添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(5) // 设置坐标
scene.add(axesHelper) // 将世界坐标添加到场景

// 添加轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
//const controls = new OrbitControls(camera,document.body)
// 设置带滑动阻尼(惯性)
controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.5
// 设置自动旋转
//controls.autoRotate = true

// 渲染函数
function animate() {
  controls.update() // 每次更新控制器
  requestAnimationFrame(animate) // 播放下一帧是调用渲染函数
  // 旋转
  /* cube.rotation.x += 0.01
  cube.rotation.y += 0.01 */
  // 渲染
  renderer.render(scene,camera)
}
animate() // 直接调用
</script>

<template>
  <!-- <RouterView /> -->
   <div>

   </div>
</template>

<style scoped>
body {
  width: 100vw;
  height: 100vh;
}
</style>
